<template>
  <view class="index">
    <!-- 回复列表 -->
    <view class="item" style="margin-bottom: 150rpx;" v-if="replyList.length > 0">
      <scroll-view style="max-height: 100vh;" scroll-y="true" :refresher-triggered="triggered" refresher-background="#f8f4f3" @scrolltolower='lower'>
        <view class="info-item" v-for="(item, index) in replyList" :key="index">
          <!-- 顶部头像 -->
          <view class="dis_f_sb_c" style="flex: 1;">
            <view class="info-item-top">
              <u-avatar :src="item.avatarUrl" v-if="item.avatarUrl"></u-avatar>
              <u-avatar :src="item.userVo.avatar" v-else></u-avatar>
              <view class="nickname-box">
                <view style="margin-right: 10rpx;">{{ item.userName|| item.userVo.nickName }}</view>
                <!-- <view class="createTimeStr"> {{item.createTimeStr}} </view> -->
              </view>
            </view>
          </view>
          <!-- 发布的内容 -->
          <view class="content">
            <view class="title">
              <u-rate readonly :count="5" v-model="item.level" activeColor="#F56C6C"></u-rate>
              <view class="level" v-if="item.level == 1">{{$t('order.level.one')}}</view>
              <view class="level" v-if="item.level == 2">{{$t('order.level.two')}}</view>
              <view class="level" v-if="item.level == 3">{{$t('order.level.three')}}</view>
              <view class="level" v-if="item.level == 4">{{$t('order.level.four')}}</view>
              <view class="level" v-if="item.level == 5">{{$t('order.level.five')}}</view>
            </view>
            <view class="content-text"> {{item.title}} </view>
            <!-- 图片 -->
            <view class="img" style="margin-top: 20rpx;" v-if="item.imgUrl">
              <view v-for="(url, index) in item.imgUrl.split(',').slice(0, 5)" :key="index" style="margin-right: 10rpx;position: relative;">
                <image :src="url" style="height: 120rpx;width:120rpx;border-radius: 10rpx;" @click="handlePostImg(url, item.imgUrl.split(','))"></image>
              </view>
            </view>
            <view class="img" v-if="item.imgUrl && item.imgUrl.split(',').length > 5">
              <view v-for="(url, index) in item.imgUrl.split(',').slice(5, 10)" :key="index" style="margin-right: 10rpx;position: relative;">
                <image :src="url" style="height: 120rpx;width:120rpx;border-radius: 10rpx;" @click="handlePostImg(url, item.imgUrl.split(','))"></image>
              </view>
            </view>
          </view>
          <view style="margin: 30rpx 10rpx;">
            <u-line v-if="replyList.length -1 != index"></u-line>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  getGoodsApi,
  addOrderApi,
  getPostListApi,
  getAddressDefaultApi,
} from "@/sheep/api/index";
import { xcxTopUp } from "@/sheep/utils/wxUtil";
export default {
  data() {
    return {
      checkboxValue: [0],
      goodsId: null,
      goods: {
        imgUrl: "",
      },
      language: "zh-Hans",
      replyList: [],
      triggered: false,
      loadStatus: "",
      contentText: {
        contentdown: "查看更多",
        contentrefresh: "加载中",
        contentnomore: "没有更多了",
      },
      query: {
        page: 1,
        pageSize: 10,
        watchId: "",
      },
      showStyle: false,
    };
  },
  onLoad(options) {
    this.goodsId = options.goodsId;
    this.query.watchId = options.goodsId;
    this.getPostList();
  },
  onShow(options) {
    uni.setNavigationBarTitle({ title: this.$t("comment.title") });
    this.language = this.$i18n.locale;
  },
  methods: {
    //查询评论列表
    getPostList() {
      getPostListApi(this.query).then((res) => {
        if (res.code == 200) {
          this.replyList = this.replyList.concat(res.rows);
          this.triggered = false;
          if (res.rows?.length < this.query.pageSize) {
            this.loadStatus = "noMore";
          } else {
            this.loadStatus = "more";
          }
        }
      });
    },
    getGoods() {
      getGoodsApi(this.goodsId).then((res) => {
        this.goods = res.data;
      });
    },
    // handleImg(url) {
    //   uni.previewImage({
    //     current: url,
    //     urls: [url],
    //   });
    // },
    handleImg(index) {
      let arr =
        this.language == "zh-Hans"
          ? this.goods.imgUrl.split(",")
          : this.goods.imgEnUrl.split(",");
      uni.previewImage({
        current: arr[index],
        urls: arr,
      });
    },
    handlePostImg(url, urlList) {
      uni.previewImage({
        current: url,
        urls: urlList,
      });
    },
    addOrder() {
      getAddressDefaultApi().then((res) => {
        if (res.code == 200 && res.data) {
          addOrderApi(this.goodsId).then((res) => {
            if (res.code == 200) {
              this.topUp(res.data);
            }
          });
        } else if (res.code == 200 && !res.data) {
          let that = this;
          uni.showModal({
            title: " ",
            confirmText: that.$t("common.confirmText"),
            cancelText: that.$t("common.cancelText"),
            content: that.$t("goods.notice.noAddress"),
            success: function (res) {
              if (res.confirm) {
                uni.navigateTo({
                  url: "/pages/mine/addressList",
                });
              }
            },
          });
        }
      });
    },
    topUp(orderId) {
      xcxTopUp(this.goods.price, orderId, "goods", this.goods.name).then(
        (res) => {
          if (res) {
            uni.showToast({
              title: "购买成功",
              duration: 1500,
            });
          }
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/order/index?type=1",
            });
          }, 1000);
        }
      );
    },
    goIndex() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    //刷新列表
    refresh() {
      this.replyList = [];
      this.query.pageNum = 1;
      this.getPostList();
    },
    // // 下拉刷新
    // onRefresh() {
    //   this.triggered = true;
    //   this.replyList = [];
    //   this.query.pageNum = 1;
    //   this.getPostList();
    // },
    // 触底了
    lower() {
      console.log("触底了");
      if (this.loadStatus !== "noMore") {
        this.query.pageNum++;
        this.getPostList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  background-color: #f5f5f5;
  height: 100%;
  .item {
    margin-bottom: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .name {
      display: flex;
      justify-content: space-between;
    }
  }
}
.info-item {
  .info-item-top {
    display: flex;
    align-items: center;
    .nickname-box {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: start;
      .nickname {
        font-size: 30rpx;
        margin-right: 10rpx;
        font-weight: 600;
      }
    }
  }
  .content {
    .content-text {
      margin-top: 10rpx;
      margin-left: 5rpx;
      font-size: 30rpx;
      //字间距
      // letter-spacing: 1rpx;
      margin-bottom: 10rpx;
    }
    .bottom {
      display: flex;
    }
  }
}
.title {
  display: flex;
  align-items: center;
  .level {
    color: #999;
    font-size: 28rpx;
    margin-left: 20rpx;
    color: #f56c6c;
  }
}
.createTimeStr {
  color: #999;
  font-size: 24rpx;
}
.img {
  display: flex;
  //相对定位
  position: relative;
  .more {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 120rpx;
    width: 120rpx;
    border-radius: 10rpx;
    //背景色透明度
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38rpx;
    color: #fff;
  }
}
</style>
